<template>
  <view class="box">
    <view class="box-item i1">1</view>
    <view class="box-item i2">2</view>
    <view class="box-item i3">3</view>
    <view class="box-item i4">4</view>
    <view class="box-item i5">5</view>
    <view class="box-item i6">6</view>
    <view class="box-item i7">7</view>
    <view class="box-item i8">8</view>
    <view class="box-item i9">9</view>
    <view class="box-item i10">10</view>
  </view>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>
<style type="text/css" lang="scss">
.box {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: column; //这里使用了就会根据rows来布局，这也合理了，因为先纵向排列再横向排列了，宽度为拓展项目
  gap: 10px;
  &-item {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    box-sizing: border-box;
    &.i1 {
      //grid-column-end: span 4;
    }
    &.i2 {
      //grid-column-end: span 3;
    }
  }
}
</style>
